<template>
	<view class="list-page">
		<u-sticky offset-top="-28" style="background: #fff; top: 0">
			<view class="srarch-wrap">
				<u-search
					placeholder="按主字段关键字搜索"
					v-model="keyword"
					shape="square"
					searchIcon=""
					:clearabled="false"
					@clear="handleClear"
					@search="handleSearch"
					actionText="取消"
					@custom="handleCancel"
					:showAction="isShowAction || this.keyword.length > 0"
					@focus="handleFocus"
					@blur="handleBlur"
				></u-search>
			</view>
		</u-sticky>

		<Empty v-if="dataSource.length === 0" />

		<u-list class="list" v-else @scrolltolower="scrolltolower">
			<u-list-item v-for="(item, index) in dataSource" :key="index" class="list-list-item">
				<view class="list-cell" @click="handleToDetail(item)">
					<u-avatar :text="item.FirstValueOnDetailPage ? item.FirstValueOnDetailPage.substring(0, 1) : ''" fontSize="16" randomBgColor></u-avatar>

					<view class="content">
						<u--text :lines="1" :text="item.FirstValueOnDetailPage ? item.FirstValueOnDetailPage : ''" class="title"></u--text>
						<view class="des">{{ item.SecondValueOnDetailPage }}</view>
						<view class="des">{{ item.ThirdValueOnDetailPage }}</view>
					</view>
				</view>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
import request from '@/utils/request.js';
import { encrypt } from '@/utils/utils.js';
import globalConfig from '@/utils/globalConfig.js';
import Empty from '@/components/empty.vue';
export default {
	components: {
		Empty
	},
	data() {
		return {
			isSearch: false, // 是否显示搜索
			dataSource: [],
			pageSize: 20,
			pageNumber: 1,
			keyword: '', // 关键字
			isBottom: false, // 是否到底
			isShowAction: false // 是否展示搜索框的取消按钮
		};
	},
	onPullDownRefresh() {
		console.log('监听用户下拉');
		// this.dataSource = [];
		this.pageNumber = 1;
		this.isBottom = false;
		this.hideToast;
		// 停止刷新
		let data = {
			EntityName: this.$route.query.EntityName,
			NumberPages: this.pageNumber, // 每页条数
			Numbers: this.pageSize, // 当前页数
			ConditionValue: this.keyword,
			...JSON.parse(localStorage.getItem('FIXED_PARAMS'))
		};
		let params = encrypt(data);
		this.getList('enablePullDownRefresh', params);
	},

	onLoad() {
		console.log('页面显示了');
		let param = {
			EntityName: this.$route.query.EntityName,
			NumberPages: this.pageNumber, // 每页条数
			Numbers: this.pageSize, // 当前页数
			ConditionValue: this.keyword,
			...JSON.parse(localStorage.getItem('FIXED_PARAMS'))
		};
		console.log(param);
		let params = encrypt(param);
		this.getList(null, params);
	},

	methods: {
		// 获取列表
		getList(isLoading, params) {
			if (!isLoading) {
				this.showToast();
			}

			request('/EnterpriseWeChatIMSSystemWorkbench/GetDetailsApi', 'POST', { ...params })
				.then((res) => {
					console.log('请求成功:', res);
					let data = JSON.parse(res.Data);
					console.log(data);
					if (data) {
						this.hideToast();
						if (data.length > 0) {
							this.dataSource = data;
						} else {
							this.dataSource = [];
						}
					}
					if (isLoading) {
						uni.stopPullDownRefresh();
					}
				})
				.catch((err) => {
					console.error('请求失败:', err);
				});
		},
		// 显示搜索框
		showSearch() {
			this.isSearch = true;
		},

		// 清空搜索框
		handleClear() {
			this.keyword = '';
		},
		// 输入框获取焦点
		handleFocus() {
			this.isShowAction = true;
		},
		// 输入框失去焦点
		handleBlur() {
			this.isShowAction = false;
		},
		// 显示提示
		showToast() {
			uni.showLoading({
				title: '正在加载',
				class: 'my-toast'
			});
		},
		// 隐藏提示
		hideToast() {
			uni.hideLoading();
		},
		// 搜索
		handleSearch() {
			localStorage.setItem('isSearch', 1);
			console.log(this.keyword);
			this.pageSize = 20;
			this.pageNumber = 1;
			this.isBottom = false; // 是否到底
			let param = {
				EntityName: this.$route.query.EntityName,
				NumberPages: this.pageNumber, // 每页条数
				Numbers: this.pageSize, // 当前页数
				ConditionValue: this.keyword,
				...JSON.parse(localStorage.getItem('FIXED_PARAMS'))
			};
			console.log(param);
			let params = encrypt(param);
			this.getList(null, params);
		},
		// 重置
		handleCancel() {
			console.log('重置');
			console.log(localStorage.getItem('isSearch'));
			if (localStorage.getItem('isSearch')) {
				this.keyword = '';
				this.pageSize = 20;
				this.pageNumber = 1;
				this.isSearch = false;
				let param = {
					EntityName: this.$route.query.EntityName,
					NumberPages: this.pageNumber, // 每页条数
					Numbers: this.pageSize, // 当前页数
					ConditionValue: this.keyword,
					...JSON.parse(localStorage.getItem('FIXED_PARAMS'))
				};
				let params = encrypt(param);
				this.getList(null, params);
				localStorage.removeItem('isSearch');
			} else {
				this.keyword = '';
				localStorage.removeItem('isSearch');
			}
			// if (this.keyword.length === 0) {
			// 	this.isSearch = false;
			// } else {

			// }
		},
		// 去详情
		handleToDetail(item) {
			console.log(item);
			uni.navigateTo({
				url: `/pages/list/detail/index?title=${item.FirstValueOnDetailPage}&id=${item.DetailsId}&name=${item.DetailsName}`
			});
		},
		// 滚动到底部，追加数据
		scrolltolower() {
			if (this.isBottom) {
				uni.showToast({
					title: '没有更多数据了',
					duration: 1500,
					icon: 'none',
					class: 'my-toast'
				});
				return;
			}
			console.log('到底了', this.pageSize, this.keyword);
			this.showToast();
			this.pageNumber = this.pageNumber + 1;
			let data = {
				EntityName: this.$route.query.EntityName,
				NumberPages: this.pageNumber, // 每页条数
				Numbers: this.pageSize, // 当前页数
				ConditionValue: this.keyword,
				...JSON.parse(localStorage.getItem('FIXED_PARAMS'))
			};
			let params = encrypt(data);

			request('/EnterpriseWeChatIMSSystemWorkbench/GetDetailsApi', 'POST', { ...params })
				.then((res) => {
					console.log('请求成功:', res);
					let data = JSON.parse(res.Data);
					console.log(data);
					if (data) {
						this.hideToast();
						if (data.length > 0 && data.length === 20) {
							this.dataSource = [...this.dataSource, ...data];
						} else if (data.length > 0 && data.length < 20) {
							this.dataSource = [...this.dataSource, ...data];
							this.isBottom = true;
						}
					}
				})
				.catch((err) => {
					console.error('请求失败:', err);
				});
		}
	}
};
</script>

<style lang="scss">
::v-deep {
	.srarch-wrap {
		padding: 30rpx 30rpx 20rpx;
		.u-button {
			height: 68rpx;
		}
	}

	.u-text__value {
		font-size: 30rpx !important;
		font-weight: 600 !important;
	}
	.u-page {
		padding: 0;
	}

	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.u-cell-group__title__text {
		font-weight: bold;
	}
}

.list .list-list-item + .list-list-item {
	border-top: 2rpx solid rgb(214, 215, 217);
}
.list {
	padding: 0 30rpx;
	box-sizing: border-box;
	height: 100%;
}
.list-cell {
	padding: 20rpx 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;

	.content {
		margin-left: 20rpx;

		.title {
			font-size: 30rpx;
			color: #303133;
			align-items: center;
		}

		.des {
			margin-top: 10rpx;
			font-size: 24rpx;
			color: #909193;
			line-height: 36rpx;
		}
	}
}
::v-deep {
	.search-view {
		.u-search__action {
			display: none;
		}
	}
}

::v-deep {
	.u-button__text {
		font-size: 28rpx !important;
	}
	.u-avatar {
		width: 80rpx !important;
		height: 80rpx !important;
	}
	.u-text .u-text__value {
		font-size: 28rpx !important;
	}
}
</style>